<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="nameBox">

    </div>
    <script>
        let nameList = ['小明', '小兰', '小吕', '小红'];
        // // 数组的push,unshift,pop,shift,splice,sort,reverse
        // const aryMethods = ['push', 'unshift', 'pop', 'shift', 'splice', 'sort', 'reverse'];
        // const arrayAugmenttations = [];
        // aryMethods.forEach(method => {
        //     let original = Array.prototype[method];
        //     arrayAugmenttations[method] = function() {
        //         console.log('改变了')
        //         return original.apply(this, arguments)
        //     }
        // })
        // nameList.__proto__ = arrayAugmenttations;
        // nameList.forEach((key, elem, arr) => {
        //     let value = nameList[elem];
        //     Object.defineProperty(nameList, elem, {
        //         get() {
        //             return value
        //         },
        //         set(newVal) {
        //             value = newVal
        //             render()
        //         }
        //     })
        // })





        // 用proxy  (apply、ownKeys、deleteProperty、has,它能监听13种数组变化)
        var proxyList = new Proxy(nameList, {
            get(arr, prop) {
                return arr[prop];
            },
            set(arr, prop, value) {
                arr[prop] = value;
                render()
            }
        })
        console.log(proxyList)
        render()
        setTimeout(function() {
            proxyList.push('小王')
        }, 2000)


















        function render() {
            let oBox = document.getElementsByClassName('nameBox')[0];
            oBox.innerHTML = '';
            for (let i of nameList) {
                let oItem = document.createElement('div');
                oItem.innerHTML = i;
                oBox.appendChild(oItem)
            }
        }
    </script>
</body>

</html>